iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 20
1
自我挑戰組

輕鬆Vue一下系列 第 20

Day20-v-charts/折線圖

  • 分享至 

  • xImage
  •  

在v-charts中,能生成的圖表有很多種,因此這裡以常見的幾種作介紹。

折線圖

https://ithelp.ithome.com.tw/upload/images/20191006/20112076Fp4DIiiHep.jpg
在生成折線圖時,需要在html中建立一個ve-line物件:
https://ithelp.ithome.com.tw/upload/images/20191006/20112076mFHsdgMnHz.jpg
這裡將會介紹幾種簡單的設定:
1.它透過settings屬性將chartSettings變數綁定,設置顯示的指標。而metrics是用來控制指標;dimension是用來控制維度,結果如下:
https://ithelp.ithome.com.tw/upload/images/20191006/20112076Bxn0040FQa.jpg
https://ithelp.ithome.com.tw/upload/images/20191006/20112076khk9IGfoN3.jpg
2.它透過settings屬性將chartSettings變數綁定,設置堆疊面積圖。而stack是用來控制欲堆疊目標有哪些;area是用來控制是否展示為面積圖,結果如下:
https://ithelp.ithome.com.tw/upload/images/20191006/20112076beNo8SvRUk.jpg
https://ithelp.ithome.com.tw/upload/images/20191006/20112076F1dIgIyE98.jpg
3.它透過extend屬性將extend變數綁定,顯示指標數值,結果如下:
https://ithelp.ithome.com.tw/upload/images/20191006/201120768wVGGJ0vD1.jpg
https://ithelp.ithome.com.tw/upload/images/20191006/20112076BD8lWtlibJ.jpg
明日預告:v-charts/柱狀圖


上一篇
Day19-v-charts
下一篇
Day21-v-charts/柱狀圖
系列文
輕鬆Vue一下30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言